<template>
  <el-popover v-model:visible="state.cronPopover" trigger="manual" width="700px">
    <Vue3Cron :cron-value="state.cronValue" i18n="cn" max-height="400px" @change="changeCron" @close="togglePopover(false)" />
    <template #reference>
      <el-input v-model.trim="state.cronValue" placeholder="* * * * * ? *" :size="size" @focus="togglePopover(true)" />
    </template>
  </el-popover>
</template>

<script>
  import { reactive, defineComponent, toRefs } from 'vue'
  import Vue3Cron from './Vue3Cron'
  export default defineComponent({
    name: 'VuiCron',
    components: { Vue3Cron },
    props: {
      modelValue: {
        type: String,
        default: '',
      },
      size: {
        type: String,
        default: function () {
          return 'small'
        },
      },
    },
    emits: ['update:modelValue'],
    setup(props, { emit }) {
      const { modelValue } = toRefs(props)
      const state = reactive({
        cronValue: modelValue.value,
        cronPopover: false,
      })
      const changeCron = (val) => {
        if (typeof val !== 'string') return false
        state.cronValue = val
        emit('update:modelValue', val)
      }
      const togglePopover = (bol) => {
        state.cronPopover = bol
      }

      return {
        state,
        changeCron,
        togglePopover,
      }
    },
  })
</script>

<style lang="scss" scoped>
  .cron {
    width: 400px;
    margin: 0 auto;
    margin-top: 100px;
    h1 {
      font-size: 50px;
      text-align: center;
    }
  }
</style>
